import React from 'react';
import { Link } from 'react-router-dom';
import { Instagram, Facebook, Twitter, Youtube, Mail } from 'lucide-react';
export function Footer() {
  return <footer className="bg-carbon-black text-sand-light border-t border-gray-800">
      <div className="container mx-auto py-12 px-4">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
          {/* Column 1 - About */}
          <div>
            <h4 className="font-display text-xl mb-4">OPENGO HUB</h4>
            <p className="mb-4 text-sm leading-relaxed">
              Your trusted gear intelligence center and launchpad for adventure.
              We test, you conquer.
            </p>
            <div className="flex space-x-4">
              <a href="#" className="hover:text-outdoor-orange">
                <Instagram size={20} />
              </a>
              <a href="#" className="hover:text-outdoor-orange">
                <Facebook size={20} />
              </a>
              <a href="#" className="hover:text-outdoor-orange">
                <Twitter size={20} />
              </a>
              <a href="#" className="hover:text-outdoor-orange">
                <Youtube size={20} />
              </a>
            </div>
          </div>
          {/* Column 2 - Activities */}
          <div>
            <h4 className="font-display text-xl mb-4">ACTIVITIES</h4>
            <ul className="space-y-2">
              <li>
                <Link to="/activities/hiking" className="hover:text-outdoor-orange transition-colors">
                  Trail & Trek
                </Link>
              </li>
              <li>
                <Link to="/activities/climbing" className="hover:text-outdoor-orange transition-colors">
                  On The Rock
                </Link>
              </li>
              <li>
                <Link to="/activities/water" className="hover:text-outdoor-orange transition-colors">
                  On The Water
                </Link>
              </li>
              <li>
                <Link to="/activities/cycling" className="hover:text-outdoor-orange transition-colors">
                  On Two Wheels
                </Link>
              </li>
              <li>
                <Link to="/activities/camping" className="hover:text-outdoor-orange transition-colors">
                  Camp & Survive
                </Link>
              </li>
            </ul>
          </div>
          {/* Column 3 - Company */}
          <div>
            <h4 className="font-display text-xl mb-4">COMPANY</h4>
            <ul className="space-y-2">
              <li>
                <Link to="/about" className="hover:text-outdoor-orange transition-colors">
                  About Us
                </Link>
              </li>
              <li>
                <Link to="/team" className="hover:text-outdoor-orange transition-colors">
                  Our Team
                </Link>
              </li>
              <li>
                <Link to="/methodology" className="hover:text-outdoor-orange transition-colors">
                  Testing Methodology
                </Link>
              </li>
              <li>
                <Link to="/contact" className="hover:text-outdoor-orange transition-colors">
                  Contact
                </Link>
              </li>
              <li>
                <Link to="/privacy" className="hover:text-outdoor-orange transition-colors">
                  Privacy Policy
                </Link>
              </li>
            </ul>
          </div>
          {/* Column 4 - Newsletter */}
          <div>
            <h4 className="font-display text-xl mb-4">JOIN THE EXPEDITION</h4>
            <p className="mb-4 text-sm">
              Subscribe to get gear reviews, adventure tips, and exclusive
              deals.
            </p>
            <div className="flex">
              <input type="email" placeholder="Your email" className="bg-earth-dark px-4 py-2 rounded-l focus:outline-none flex-grow" />
              <button className="bg-outdoor-orange hover:bg-climbing-red px-4 py-2 rounded-r transition-colors">
                <Mail size={20} />
              </button>
            </div>
          </div>
        </div>
        <div className="mt-12 pt-6 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center">
          <div className="mb-4 md:mb-0">
            <div className="flex items-center">
              <img src="https://images.unsplash.com/photo-1551632436-cbf8dd35adfa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&h=100&q=80" alt="Field Tested" className="h-12 w-12 rounded-full object-cover mr-3" />
              <span className="font-display text-sm">
                FIELD TESTED IN YOSEMITE NATIONAL PARK
              </span>
            </div>
          </div>
          <p className="text-sm text-gray-500">
            © {new Date().getFullYear()} OpenGo Hub. All rights reserved.
          </p>
        </div>
      </div>
    </footer>;
}